Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tryon Demo</title>
  </head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdn.mirrar.online/js/init.min.js"></script>

  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      overflow: hidden;
    }

    #MirrAR-panel {
      height: 100%;
      width: 100%;
      top: 0;
      position: absolute;
      z-index: 0;
    }

  </style>

  <body>
      <div id="VTO"></div>
  </body>
  <script>

    // Replace this tryon payload depending on the category of your product
    var tryonPayload = {
      product_id: YOUR_PRODUCT_SKU, // Required
      product_category: "NECK",
      neck_wearing: NECKLACE_URL, // The image should be a transparent png
      x_neck: null, // Horizontal Offset (optional)
      y_neck: null, // Vertical Offset (optional)
      ppu_neck: null, // On increasing the ppu value the tryon image gets smaller (optional)
    };

    $(document).ready(function () {
      var options = {
          key: YOUR_API_KEY,
          ExID: "VTO",
          brandLogo: BRAND_LOGO_URL
      };
      init(options);
      start();
    });
    document.addEventListener("init", function () {
      filterAddRemove("add", tryonPayload);
    });

  </script>

</html>

Tryon Payload for Necklace

  // Necklace Tryon 
  var tryonPayload = {
    product_id: YOUR_PRODUCT_SKU, // Required
    product_category: "NECK",
    neck_wearing: NECKLACE_URL, // The image should be a transparent png
    x_neck: null, // Horizontal Offset (optional)
    y_neck: null, // Vertical Offset (optional)
    ppu_neck: null, // On increasing the ppu value the tryon image gets smaller (optional)
  };

Tryon Payload for Earring

  // Earring Tryon 
  var tryonPayload = {
    product_id: YOUR_PRODUCT_SKU, // Required
    product_category: "EAR",
    ear_wearing: EARRING_URL, // The image should be a transparent png
    x_ear: null, // Horizontal Offset (optional)
    y_ear: null, // Vertical Offset (optional)
    ppu_ear: null, // On increasing the ppu value the tryon image gets smaller (optional)
  };

Tryon Payload for Set

  // Necklace & Earring Set Tryon
  var tryonPayload = {
    product_id: YOUR_PRODUCT_SKU, // Required
    product_category: "SET",
    neck_wearing: NECKLACE_URL, // The image should be a transparent png
    ear_wearing: EARRING_URL, // The image should be a transparent png
    x_neck: null, // Horizontal Offset (optional)
    y_neck: null, // Vertical Offset (optional)
    ppu_neck: null, // On increasing the ppu value the tryon image gets smaller (optional)
    x_ear: null, // Horizontal Offset (optional)
    y_ear: null, // Vertical Offset (optional)
    ppu_ear: null, // On increasing the ppu value the tryon image gets smaller (optional)
  };

Tryon Payload for Watch

  // Watch Tryon
  var tryonPayload = {
    product_id: YOUR_PRODUCT_SKU, // Required
    product_category: "WATCH",
    hand_wearing: WATCH_URL, // The image should be a transparent png
    x_hand: null, // Horizontal Offset (optional)
    y_hand: null, // Vertical Offset (optional)
    ppu_hand: null, // On increasing the ppu value the tryon image gets smaller (optional)
  };

Tryon Payload for Ring

  // Ring Tryon
  var tryonPayload = {
    product_id: YOUR_PRODUCT_SKU, // Required
    product_category: "RING",
    hand_wearing: RING_IMG_URL, // The image should be a transparent png
    x_hand: null, // Horizontal Offset (optional)
    y_hand: null, // Vertical Offset (optional)
    ppu_hand: null, // On increasing the ppu value the tryon image gets smaller (optional)
  };

Tryon Payload for Eyelens

  // Eyelens Tryon
  var tryonPayload = {
  product_id: YOUR_PRODUCT_SKU, // Required
  product_category: "EYELENS",
  eyelens_img: EYELENS_IMG_URL, // The image should be a transparent PNG
};

Tryon Payload for Lipstick

  // Lipstick Tryon
  var tryonPayload = {
  product_id: YOUR_PRODUCT_SKU, // Required
  product_category: "LIPSTICK",
  color: LIPSTICK_COLOR, // Hexadecimal color code for lipstick along with alpha
  };

Tryon Payload for Eyekajal

  // Eyekajal Tryon
  var tryonPayload = {
  product_id: YOUR_PRODUCT_SKU, // Required
  product_category: "EYEKAJAL",
  color: EYEKAJAL_COLOR, // Hexadecimal color code for eyekajal along with alpha
  lineHeight: EYEKAJAL_WIDTH // Integer value for eyekajal height
  };

Tryon Payload for Eyeliner

  // Eyeliner Tryon
  var tryonPayload = {
  product_id: YOUR_PRODUCT_SKU, // Required
  product_category: "EYELINER",
  color: EYELINER_COLOR, // Hexadecimal color code for eyeliner along with alpha
  lineHeight: EYELINER_WIDTH // Integer value for eyeliner height
  };

Tryon Payload for Eyeshadow

  // Eyeshadow Tryon
  var tryonPayload = {
  product_id: YOUR_PRODUCT_SKU, // Required
  product_category: "EYESHADOW",
  color: EYESHADOW_COLOR, // Hexadecimal color code for eyeshadow along with alpha
  };

Tryon Payload for Faceblush

  // Faceblush Tryon
  var tryonPayload = {
  product_id: YOUR_PRODUCT_SKU, // Required
  product_category: "FACEBLUSH",
  color: FACEBLUSH_COLOR, // Hexadecimal color code for faceblush along with alpha
  };